"use client"
import React, {ReactNode, useState} from 'react';
import {Input, Button, Card, Checkbox, Divider, message} from 'antd';
import {Button as ButtonNext} from "@nextui-org/react";
import Link from 'next/link';
import {UserOutlined, LockOutlined, GithubOutlined, GoogleOutlined, HomeOutlined} from '@ant-design/icons';
import {useRouter} from 'next/navigation';
import {fetch} from '../../utils/request';

const Login: React.FC = () => {
    const router = useRouter();
    const [messageApi, contextHolder] = message.useMessage();
    const [formData, setFormData] = useState({
        username: '',
        password: '',
        remember: false
    });

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();

        try {
            const response: {code: unknown, msg: ReactNode} = await fetch('/api3/auth/login', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                data: {userName: formData.username, passWord: formData.password},
            });
            console.log('登录回调', response);
            if (response && response?.code === 200){
                messageApi.open({
                    type: 'success',
                    content: '登录成功',
                });
                router.push('/home');
            } else {
                messageApi.open({
                    type: 'warning',
                    content: response?.msg,
                });
            }
        } catch (error) {
            console.error('登录错误:', error);
            messageApi.open({
                type: 'error',
                content: '登录过程中出现错误',
            });
        }
    };

    const handleChange = (name: string, value: string) => {
        setFormData(prev => ({
            ...prev,
            [name]: value
        }));
    };

    return (
        <div className="min-h-screen flex items-center justify-center relative overflow-hidden"
             style={{
                 background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
             }}>
            {contextHolder}
            {/* 背景装饰 */}
            <div className="absolute inset-0 z-0">
                <div className="absolute top-0 left-0 w-full h-full bg-pattern opacity-10"
                     style={{
                         backgroundImage: `url('/pattern.png')`,
                         backgroundSize: '100px 100px'
                     }}
                />
                <div
                    className="absolute -top-40 -right-40 w-80 h-80 bg-purple-400 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"/>
                <div
                    className="absolute -bottom-40 -left-40 w-80 h-80 bg-blue-400 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"/>
            </div>

            {/* 返回首页按钮 */}
            <Link href="/">
                <div
                    style={{
                        position: 'absolute',
                        top: '2rem',
                        left: '2rem',
                        zIndex: 10,
                        width: '48px',
                        height: '48px',
                        borderRadius: '50%',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        background: 'rgba(255, 255, 255, 0.8)',
                        border: 'none',
                        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
                        transition: 'all 0.3s ease',
                        cursor: 'pointer'
                    }}
                    className="hover:bg-white hover:scale-110"
                >
                    <HomeOutlined style={{fontSize: '20px'}}/>
                </div>
            </Link>

            {/* 主要内容 */}
            <Card
                title={
                    <div className="text-center">
                        <h2 style={{marginTop: '12px'}} className="text-2xl font-bold bg-gradient-to-r from-purple-500 to-blue-500 bg-clip-text text-transparent">
                            欢迎回来
                        </h2>
                        <p className="text-gray-500 text-sm mt-2">登录您的账号</p>
                    </div>
                }
                className="w-[400px] shadow-2xl z-10 transform hover:scale-[1.01] transition-transform duration-300"
                style={{
                    borderRadius: '20px',
                    border: 'none',
                    background: 'rgba(255, 255, 255, 0.95)',
                    // backdropFilter: 'blur(0px)'
                }}
            >
                <form onSubmit={handleSubmit} className="space-y-5">
                    <div className="space-y-1">
                        <label className="text-sm text-gray-600 ml-1">用户名/邮箱</label>
                        <Input
                            size="large"
                            prefix={<UserOutlined className="text-gray-400"/>}
                            placeholder="请输入用户名或邮箱"
                            value={formData.username}
                            onChange={(e: {target: unknown}) => handleChange('username', e.target.value)}
                            required
                            className="rounded-lg hover:border-purple-400 focus:border-purple-500"
                        />
                    </div>

                    <div className="space-y-1">
                        <label className="text-sm text-gray-600 ml-1">密码</label>
                        <Input.Password
                            size="large"
                            prefix={<LockOutlined className="text-gray-400"/>}
                            placeholder="请输入密码"
                            value={formData.password}
                            onChange={(e) => handleChange('password', e.target.value)}
                            required
                            className="rounded-lg hover:border-purple-400 focus:border-purple-500"
                        />
                    </div>

                    <div className="flex justify-between items-center">
                        <Checkbox
                            checked={formData.remember}
                            onChange={(e) => handleChange('remember', e.target.checked)}
                            className="text-gray-600 hover:text-purple-500"
                        >
                            记住我
                        </Checkbox>
                        <a className="text-purple-500 hover:text-purple-700 text-sm" href="/forgot-password">
                            忘记密码？
                        </a>
                    </div>

                    <ButtonNext
                        color="primary"
                        type="submit"
                        size="large"
                        block
                        className="w-full mt-6 bg-gradient-to-r from-purple-500 to-blue-500 border-none rounded-lg h-12 text-lg font-medium hover:opacity-90 hover:scale-[1.02] transform transition-all"
                    >
                        登录
                    </ButtonNext>

                    <Divider className="my-6">
                        <span className="text-gray-400 text-sm">或使用以下方式登录</span>
                    </Divider>

                    <div className="flex justify-center space-x-6">
                        <Button
                            icon={<GithubOutlined/>}
                            size="large"
                            shape="circle"
                            className="hover:bg-gray-100 hover:scale-110 transition-all duration-300 border-gray-200"
                            onClick={(e) => {
                                console.log('githubBtn', e);
                                e.stopPropagation();
                                e.preventDefault();
                            }}
                        />
                        <Button
                            icon={<GoogleOutlined/>}
                            size="large"
                            shape="circle"
                            className="hover:bg-gray-100 hover:scale-110 transition-all duration-300 border-gray-200"
                        />
                    </div>

                    <div className="text-center mt-6">
                        <span className="text-gray-600">还没有账号？</span>
                        <a
                            className="text-purple-500 ml-2 hover:text-purple-700 cursor-pointer font-medium"
                            onClick={() => router.push('/signup')}
                        >
                            立即注册
                        </a>
                    </div>
                </form>
            </Card>
        </div>
    );
};

export default Login;
